<template>
  <div class="content_wrap">
    <div
      v-for="item in results"
      :key="item.createTime"
      class="content_wrap--item"
    >
      <el-row class="row__wrap row__wrap--title">
        <el-col :span="12"> 验收人: {{ item.acceptanceUserName }} </el-col>
        <el-col :span="12" class="col__wrap--right">
          提交时间: {{ item.createTime }}
        </el-col>
      </el-row>
      <el-row class="row__wrap">
        <el-col :span="5" class="row__wrap--right"> 现场验收资料:</el-col>
        <el-col :span="19">
          <div
            v-for="i in parseDataTransfer(item?.attachments)"
            :key="i?.uuidFile"
          >
            <el-link
              type="primary"
              icon="el-icon-folder"
              @click.prevent="handleDownload(i)"
            >
              {{ i?.fileName }}&emsp;
            </el-link>
          </div>
        </el-col>
      </el-row>
      <el-row class="row__wrap">
        <el-col :span="5" class="row__wrap--right"> 验收详情:</el-col>
        <el-col :span="19">
          <div class="col__wrap--text">{{ item.acceptanceMark }}</div>
        </el-col>
      </el-row>
      <el-row class="row__wrap">
        <el-col :span="5" class="row__wrap--right"> 审批意见:</el-col>
        <el-col :span="19">
          <div class="col__wrap--dom">
            <div
              class="status"
              :class="
                item.approvePoint === '1' ? 'status--success' : 'status--error'
              "
            ></div>
            <span>{{
              item.approvePoint === "1" ? "验收通过" : "验收不通过"
            }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getsceneAcceptance } from "/@/api/acceptance";
import { defineProps, ref } from "vue";
import { download } from "/@/utils/download";

const props = defineProps({
  recodId: {
    type: Number,
    default: 0
  }
});

let results = ref([]);

const parseDataTransfer = data => {
  if (!data) return [];
  return JSON.parse(data);
};

const getTableData = async () => {
  try {
    const params = {
      id: props.recodId
    };
    const { code, data } = await getsceneAcceptance(params);
    if (code === 200) {
      results.value = data;
    }
  } catch (err) {
    console.log(err);
  }
};

const handleDownload = item => {
  if (!item) return;
  download(item);
};

getTableData();
</script>
<style lang="scss" scoped>
.content_wrap {
  max-height: 500px;
  overflow-y: auto;
  &--item {
    padding-bottom: 10px;
    border: 1px solid #f0f4ff;
    border-radius: 4px;
    margin-bottom: 20px;
  }
}
.row__wrap {
  margin-bottom: 8px;
  padding: 0 20px;
  &--title {
    background: #f0f4ff;
    line-height: 30px;
  }
  &--right {
    text-align: right;
    padding-right: 20px;
  }
}
.col__wrap--text {
  min-height: 60px;
  border: 1px solid #d8dadf;
  border-radius: 4px;
  padding: 4px;
  font-size: 16px;
  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.col__wrap--right {
  text-align: right;
}
.col__wrap--dom {
  display: flex;
  align-items: center;
  .status {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 5px;
    &--success {
      background: #409eff;
    }
    &--error {
      background: #ff0000;
    }
  }
}
</style>
